<template>
  <table class="table table-bordered table-stripped">
    <MyTable :tabs="list">
      <!-- 表格标题区域 -->
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <!-- 表格主体区域 -->
      <template #body="obj">
        <td>{{ obj.index + 1 }}</td>
        <td>{{ obj.item.goods_name }}</td>
        <td>￥{{ obj.item.goods_price | price }}</td>
        <td>
          <!-- 一开始input隐藏按钮显示，点击按钮隐藏input显示 -->
          <input
            v-if="obj.item.inputVisible"
            class="tag-input form-control"
            type="text"
            v-focus
            @blur="obj.item.inputVisible = false"
            @keyup.enter="add(obj.item.id, $event)"
            @keyup.esc="$event.target.value = ''"
          />
          <button
            v-else
            class="btn btn-primary btn-sm add-tag"
            @click="obj.item.inputVisible = true"
          >
            +Tag
          </button>
          <span
            class="badge badge-warning"
            v-for="item in obj.item.tags"
            :key="item.id"
            >{{ item }}</span
          >
        </td>
        <td>
          <button class="btn btn-danger" @click="del(obj.item.id)">删除</button>
        </td>
      </template>
    </MyTable>
  </table>
</template>

<script>
// 引入axios
import axios from "axios";
// 引入MyTable组件
import MyTable from "../components/MyTable";
export default {
  components: {
    MyTable,
  },
  data() {
    return {
      list: [],
    };
  },
  // 数据初始化后会执行
  async created() {
    // 发送ajax请求
    const res = await axios({
      method: "get",
      url: "https://www.escook.cn/api/goods",
    });
    console.log(res);
    const { status, data } = res.data;
    if (status === 0) {
      this.list = data;
    }
  },
  // 方法
  methods: {
    // 删除
    del(id) {
      // console.log(id);
      this.list = this.list.filter((item) => item.id !== id);
    },
    // 添加
    add(id, e) {
      // 通过id找到对应的对象，在对象里面添加获取到的事件的value最后情况输入框的内容
      const results = this.list.find((item) => item.id === id);
      results.tags.unshift(e.target.value);
      results.inputVisible = false;
    },
  },
  // 自定义指令
  directives: {
    focus: {
      // Dom渲染完成调用
      inserted(el) {
        el.focus();
      },
      // Dom发生改变调用
      update(el) {
        el.focus();
      },
    },
  },
  // 过滤器
  filters: {
    price(value) {
      return value.toFixed(2);
    },
  },
};
</script>

<style scoped>
.badge {
  margin-left: 5px;
}
</style>